import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/components/PlayListBottomSheet.dart';
import 'package:freemusic/model/AbstractSong.dart';
import 'package:freemusic/page/song/PlayPage.dart';
import 'package:freemusic/services/SongServices.dart';
import 'package:freemusic/stores/PlayerStores.dart';
import 'package:freemusic/utils/Util.dart';

class PlayerWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return PlayerState();
  }
}

class PlayerState extends State<PlayerWidget>
    with StoreWatcherMixin<PlayerWidget> {
  PlayerStore _playerStore;
  final double _imageHeight = 50;
  final double _imageWidth = 50;
  SongServices _songServices = SongServices.getInstace();

  @override
  void initState() {
    super.initState();
    _playerStore = listenToStore(playerStoreToken);
  }

  void _showTempSongList() {
    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
          ),
        ),
        builder: (context) => PlayListBottomSheet());
  }

  _renderPlaying(bool playing) {
    return playing ? "images/zanting.png" : "images/bofang.png";
  }

  @override
  Widget build(BuildContext context) {
    AbstractSong songInfo = _playerStore.current;
    bool playing = _playerStore.playing;
    Color themeColor = Util.themeColor;

    return Container(
      height: 60.0,
      decoration: BoxDecoration(color: Colors.white, border: Border()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            child: Row(
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => PlayPage()));
                  },
                  child: Container(
                    margin: EdgeInsets.only(left: 10.0, right: 10.0),
                    child: Stack(
                      children: <Widget>[
                        ClipOval(
                          child: Image(
                            height: _imageHeight,
                            width: _imageWidth,
                            image: songInfo.img == null
                                ? AssetImage("images/nvhai.png")
                                : NetworkImage(songInfo.img),
                          ),
                        ),
                        Positioned(
                          child: SizedBox(
                            height: _imageHeight,
                            width: _imageWidth,
                            child: CircularProgressIndicator(
                              value: 0,
                              strokeWidth: 2.0,
                              valueColor:
                                  new AlwaysStoppedAnimation<Color>(themeColor),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  width: 90.0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        songInfo.songName == null ? "未播放歌曲" : songInfo.songName,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 16.0),
                      ),
                      Text(
                        songInfo.singerName == null
                            ? "未播放歌曲"
                            : songInfo.singerName,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 12.0),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              Button(
                icon: "images/shangyishou.png",
                onTap: () {
                  _songServices.prevSong();
                },
              ),
              Button(
                icon: _renderPlaying(playing),
                onTap: () {
                  _songServices.changePlaying(!_playerStore.playing);
                },
              ),
              Button(
                icon: "images/xiayishou.png",
                onTap: () {
                  _songServices.nextSong();
                },
              ),
              Button(
                icon: "images/gedan.png",
                onTap: this._showTempSongList,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class Button extends StatelessWidget {
  final double _size = 32.0;
  final String icon;
  final GestureTapCallback onTap;

  Button({this.icon, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      child: Container(
        margin: EdgeInsets.only(
          left: 8,
        ),
        child: Image.asset(
          this.icon,
          width: this._size,
        ),
      ),
      onTap: this.onTap,
    );
  }
}
